@charset "utf-8";
.mj-drawer-wrap {
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 2000;
    height: 100%;

    transition: 1s;
    overflow: hidden;
}
.mj-drawer {
    position: absolute;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    transition: 1s;
    transition:all .3s ease;
    box-shadow:0 0 10px 10px rgba(0,0,0,0.2);
}
.mj-drawer-top {
    left: 0;
    top: 0;
}
.mj-drawer-bottom {
    left: 0;
    bottom: 0;
}
.mj-drawer-left {
    left: 0;
    top: 0;
}
.mj-drawer-right {
    right: 0px;
    top: 0;
}
.mj-drawer .loading{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: hsla(0,0%,100%,.9);
    z-index: 2099;
}
/*加载样式*/
.mj-drawer .loader {
    height: 100px;
    width: 20%;
    text-align: center;
    padding: 1em;
    display: inline-block;
    vertical-align: top;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.mj-drawer-header {
    border-bottom: 1px solid #e8eaec;
}
.mj-drawer-header > div {
    height: 100%;
    display: flex;
    padding: 0 20px;
    line-height: 50px;
}
.mj-drawer-header .title{
    flex: 1;
    font-size: 16px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.mj-drawer-header .close{
    width: 30px;
    text-align: right;
    font-size: 18px;
    color: #909399;
    cursor: pointer;
    z-index: 2100;
}
.mj-drawer-header .close i {
	font-size:22px;
}
.mj-drawer-body {
    overflow: auto;
    flex: 1;
    padding: 20px 20px;
    box-sizing: border-box;
}
.mj-drawer-footer {
    border-top: 1px solid #e8eaec;
    padding: 10px 20px;
    box-sizing: border-box;
}
/*滚动条凹槽的颜色，还可以设置边框属性*/
.mj-drawer-body::-webkit-scrollbar-track-piece {
    background-color:#f8f8f8;
}
/*滚动条的宽度*/
.mj-drawer-body::-webkit-scrollbar {
    width:9px;
    height:9px;
}
/*滚动条的设置*/
.mj-drawer-body::-webkit-scrollbar-thumb {
    background-color:#C0C4CC;
    background-clip:padding-box;
    min-height:28px;
    border-radius: 10px;
}
.mj-drawer-body::-webkit-scrollbar-thumb:hover {
    background-color:#bbb;
}

/* 设置持续时间和动画函数 */
.fade-enter-active, .fade-leave-active {
    transition: opacity .3s
}
.fade-enter, .fade-leave-to {
    opacity: 0
}

.mj-drawer-right {
	animation: rtl-drawer-out .3s
}
.mj-drawer-open .mj-drawer-right {
	animation: rtl-drawer-in .3s 1ms
}

.mj-drawer-left {
	animation: ltr-drawer-out .3s
}
.mj-drawer-open .mj-drawer-left {
	animation: ltr-drawer-in .3s 1ms
}

.mj-drawer-top {
	animation: ttb-drawer-out .3s
}
.mj-drawer-open .mj-drawer-top {
	animation: ttb-drawer-in .3s 1ms
}

.mj-drawer-bottom {
	animation: btt-drawer-out .3s
}
.mj-drawer-open .mj-drawer-bottom {
	animation: btt-drawer-in .3s 1ms
}

@keyframes rtl-drawer-in {
    0% {
        transform: translate(100%)
    }

    to {
        transform: translate(0)
    }
}

@keyframes rtl-drawer-out {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(100%)
    }
}

@keyframes ltr-drawer-in {
    0% {
        transform: translate(-100%)
    }

    to {
        transform: translate(0)
    }
}

@keyframes ltr-drawer-out {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-100%)
    }
}

@keyframes ttb-drawer-in {
    0% {
        transform: translateY(-100%)
    }

    to {
        transform: translate(0)
    }
}

@keyframes ttb-drawer-out {
    0% {
        transform: translate(0)
    }

    to {
        transform: translateY(-100%)
    }
}

@keyframes btt-drawer-in {
    0% {
        transform: translateY(100%)
    }

    to {
        transform: translate(0)
    }
}

@keyframes btt-drawer-out {
    0% {
        transform: translate(0)
    }

    to {
        transform: translateY(100%)
    }
}
.drawer-body {
	overflow: hidden;
	padding-right:9px;
}